<!--  -->
<template>
    <div class=''>
        <el-form :model="form" ref="form" :rules="rules" label-width="auto" style="max-width: 600px">
            <el-form-item label="选择城市" prop="areaName">
                <el-cascader :placeholder="placeholder" ref="cascaderAddr" style="width: 100%;" :props="CascaderProps"
                    @change="handleAreaChange" v-model="form.areaName" :options="options" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" v-loading="loding">保存</el-button>
                <el-button @click="handlerCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { useCascaderAreaData } from '@/utils/area'
import SalesApi from '@/api/sales'
import { ElMessage, ElLoading } from "element-plus";
import { compileScript } from 'vue/compiler-sfc';
export default {
    name: '',
    props: {},
    components: {},
    data() {
        return {
            CascaderProps: {
                value: 'id',
                label: 'name',
            },
            placeholder: '',
            areaId: "",
            imageUrl: '',
            areaName: '',
            options: [],
            areaData: useCascaderAreaData(),
            title: '',
            loding: false,
            province: '',
            CityName: '',
            district: '',
            City: '',
            form: {
                areaName: [],
                areaCode: []
            },
            rules: {
                areaName: [
                    { required: true, message: '请选择城市', trigger: 'blur' },
                ],
            }

        };
    },
    computed: {},
    watch: {},
    methods: {
        handleAreaChange(value) {
            console.log(value, 'value')
            this.$nextTick(() => {
                var reg = new RegExp(' / ', "g")
                this.CityName = this.$refs['cascaderAddr'].presentText.replace(reg, ',')

            })
            this.form.areaCode = value;
        },
        handlerCancel() {
            this.$router.back()
        },
        onSubmit() {
            const $this = this
            $this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.$route.query && this.$route.query.areaCode) {
                        // 编辑
                        const $this = this
                        let formData = JSON.parse(JSON.stringify($this.form))
                        const area = $this.form.areaName
                        $this.province = area[0]
                        $this.city = area[1]
                        $this.district = area[2]
                        $this.loding = true
                        SalesApi.updateArea({
                            province: $this.province,
                            city: $this.city,
                            district: $this.district,
                            areaName: this.CityName,
                            areaCode: formData.areaCode.join(","),
                            areaId: $this.areaId
                        }, true)
                            .then(result => {
                                const { code, msg } = result
                                $this.loding = false
                                if (code === 1) {
                                    ElMessage({
                                        message: msg,
                                        type: "success",
                                    });
                                    $this.$router.push('/saleeMan/Jurisdiction', { replace: true })
                                }
                            })
                    } else {

                        let formData = JSON.parse(JSON.stringify($this.form))
                        const area = $this.form.areaName
                        $this.province = area[0]
                        $this.city = area[1]
                        $this.district = area[2]
                        $this.loding = true
                        SalesApi.addArea({
                            province: $this.province,
                            city: $this.city,
                            district: $this.district,
                            areaName: this.CityName,
                            areaCode: formData.areaCode.join(","),
                        }, true)
                            .then(result => {
                                const { code, msg } = result
                                $this.loding = false
                                if (code === 1) {
                                    ElMessage({
                                        message: msg,
                                        type: "success",
                                    });
                                    $this.$router.push('/saleeMan/Jurisdiction', { replace: true })
                                }
                            })
                    }
                }

            })

        }
    },
    created() {
        const route = this.$route.query
        if (route && route.areaCode) {
            this.placeholder = route.areaName;
            this.form.areaName = route.areaName;
            this.title = '编辑辖区'
            this.areaId = route.id
        } else {
            this.title = '添加辖区'
            this.placeholder = '请选择城市'
        }
        // 请求数据
        SalesApi.regionLists().then(res => {
            const { code, data } = res;
            this.options = data
        })
    },
    mounted() {

    },
}
</script>
<style scoped></style>